import React from 'react'
import axios from 'axios'
import { connect } from 'react-redux'
// 引入组件
import Topic from './component/Topic.jsx'
import List from './component/List.jsx'
import Recommend from './component/Recommend.jsx'
import Writer from './component/Writer.jsx'

import * as actionCreator  from './store/actionCreator.js'

import {
  HomeWrapper,
  HomeLeft,
  HomeRight
} from './style.js'


class Home extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className="banner-img" src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"/>
          <Topic></Topic>
          <List></List>
        </HomeLeft>
        <HomeRight>
          <Recommend></Recommend>
          <Writer></Writer>
        </HomeRight>
      </HomeWrapper>
    )
  }
  componentDidMount(){
    axios.get('/api/home.json').then((res) => {
       const result = res.data.data
       this.props.changeHomeData(actionCreator.actionChangeHomeData(result))
    }).catch((err) => {
      console.log(err)
    })
  }
}

const mapDispatch = (dispatch) => {
  return {
    changeHomeData(action){
      dispatch(action)
    }
  }
}
export default connect(null, mapDispatch)(Home)